<template>
  <div class="douyin">
    <top></top>
    <div class="center">
      <left></left>
      <div class="right productionDelivery">
        <div class="o_ul">
          <div class="o_li" :class="form.tab == item.id?'act':''" @click="changetab(item.id)" v-for="item in whos" :key="item.id">{{item.name}}</div>


        </div>
        <div style="padding: 20px; display: flex;">
          <el-button type="danger" @click="goid('/productionDelivery2/douyinaddlist')" style="margin-right: 20px;">添加商品
          </el-button>
          <tongbu></tongbu>
        </div>
        <div class="row">
          <el-form ref="form" @submit.native.prevent :model="form" label-width="80px">
            <el-form-item label="商品名称">
              <el-input v-model="form.sale_name"></el-input>
            </el-form-item>
            <el-form-item label="商家编码">
              <el-input v-model="form.fetch_code"></el-input>
            </el-form-item>

            <el-button type="danger" size="mini" @click="search">搜索</el-button>
          </el-form>
        </div>
        <div class="con" v-loading="loading"
          style="margin:0 20px; ">

          <el-table :data="list" style="text-align: center;" align="center" border :loading="loading">
            <el-table-column label="商品标题">
              <template slot-scope="scope">
                <span>{{ scope.row.sale_name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="商品编码">
              <template slot-scope="scope">
                <span>{{ scope.row.fetch_code }}</span>
              </template>
            </el-table-column>
            <el-table-column label="排序">
              <template slot-scope="scope">
                <span>{{ scope.row.order }}</span>
              </template>
            </el-table-column>

            <el-table-column label="时间">
              <template slot-scope="scope">
                <span>{{ scope.row.created_at }}</span>
              </template>
            </el-table-column>
            <el-table-column label="上下架">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.shangjia" @change="changes(scope.row)" active-color="#13ce66"
                  inactive-color="#eaeaea"></el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="400px">
              <template slot-scope="scope">
                <div style="display: flex;">
                  <el-button type="text" @click="go(scope.row.id)">编辑</el-button>
                  <el-button type="text" @click="deletes(scope.row.id)">删除</el-button>
                  <tongbu2 :id="scope.row.id" style="margin:0 10px;"></tongbu2>
                  <el-button type="text" @click="shangchuan(scope.row.id)">上传不发货地址</el-button>
                  <el-button type="text" @click="down">模板下载</el-button>

                </div>

              </template>
            </el-table-column>
          </el-table>
          <el-pagination background layout="total,prev, pager, next" :current-page="form.page" @current-change="fanye"
            :page-size="form.pagesize" :total="total"></el-pagination>
        </div>
        <el-dialog title="上传不发货地址(上传后将覆盖原设置的区域)" :visible.sync="log" width="700px">
          <div class="flex">
            <el-upload style="height: 34px;"  action="https://jsonplaceholder.typicode.com/posts/" :http-request="upup">
              <el-button size="small" type="primary">上传不发货地址</el-button>
            </el-upload>
            <!-- <div>上传后将覆盖原设置的区域</div> -->
          </div>
        	  <span slot="footer" class="dialog-footer">
        		<el-button @click="log = false">取消</el-button>
        		<el-button type="primary" @click="loggo">确定</el-button>
        	  </span>
        </el-dialog>
      </div>
    </div>

    <foot></foot>


  </div>
</template>

<script>
  import tongbu from './douyinqiehuan.vue'
  import tongbu2 from './douyinqiehuan2.vue'
  import axios from 'axios'
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      "foot": foot,
      tongbu,
      tongbu2
    },
    name: 'douyin',
    data() {
      return {
        whos:[
          {id:15,name:"抖音"},
          {id:1,name:"抖音2"},
          {id:3,name:"抖音3"},
          {id:4,name:"抖音4"},
          {id:13,name:"选号商品"},
          {id:5,name:"快手"},
          {id:6,name:"小程序"},
          {id:7,name:"快手2"},
          {id:8,name:"快手3"},
          {id:9,name:"快手4"},
          {id:10,name:"盘古"},
          {id:11,name:"微步"},
          {id:12,name:"快手短视频"},
          {id:14,name:"微信"}
        ],
        form: {
          page: 1,
          pagesize: 20,
          sale_name: "",
          fetch_code: "",
          tab:""
        },
        loading: true,
        list: "",
        total: 0,
        list2: "",
        log:false,
        logid:"",
        logfile:"",
        url:""
      }
    },
    created() {
      //地址配置,用于下载模板
      if(window.location.href.indexOf("91haoka_platform") > -1){
      	console.log("线上项目，谨慎操作。")
      	this.url = window.location.origin+"/91haoka_platform/"
      }else{
      	this.url = ""
      }
      if(this.$route.query.tab){
        this.form.tab = this.$route.query.tab
      }
      this.getpro();


    },
    methods: {
      down:function(){
              const a = document.createElement('a');
            	a.setAttribute('download', '不发货省市区.xlsx');
            	a.setAttribute('href', this.url+'static/bufahuoshengshiqu.xlsx');
            	a.click();
      },
      shangchuan:function(id){
        this.logid = id
        this.logfile = ''
        this.log = true
      },
      upup:function(file){
        this.logfile = file.file
      },
      loggo:function(){
        if(this.logfile == ''){
          this.$message.error('请先选择上传文件');
          return false
        }
        var that = this
        var params = new FormData();
        params.append('file',this.logfile);
        params.append('id',this.logid);
        axios.post("/api/tool/import/deliver/city", params)
                .then(response=> {
                    if (response.data.msg.code == 0) {
                        this.$message.success('解析中，稍后进入详情查看！');
                        this.log = false
                    }else{
                        this.$message.error(response.data.msg.info);
                    }
                })
      },
      changetab:function(val){
        if(val){
          this.form.tab = val
        }else{
           this.form.tab = ''
        }
        this.form.page = 1
        this.getpro()
      },
      go: function(id) {
        this.$router.push({
          path: '/productionDelivery2/douyinfabu',
          query: {
            id: id,
            bianji: true,
            dizhi:this.$route.path
          }
        })
      },
      changes: function(item) {
        if (item.on_sale == 0) {
          item.on_sale = -100
        } else {
          item.on_sale = 0
        }
        this.loading = true
        axios.post('/api/plan-market/web/page/make', item)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getpro()
            } else {
              this.$message.error(response.data.msg.info);
            }
            this.loading = false
          })
      },
      getshops: function() {
        //获取商品
        var that = this;
        axios.get('/api/gth/supplier/products?page_size=1000')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.shoplists = response.data.data.data
            } else {
              if (response.data.msg.code == 50401) {
                that.$router.push({
                  path: "/login"
                });
                return false
              }
              that.$message.error(response.data.msg.info);
            }
          })
      },

      deletes: function(id) {
        var that = this
        this.$confirm('此操作将永久在这个栏目下删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.post('/api/plan-market/web/page/delete', {
              id: id
            })
            .then(response => {
              if (response.data.msg.code == 0) {
                that.$message({
                  message: '删除成功！',
                  type: 'success'
                });
                that.loading = true
                that.getpro()
              } else {
                if (response.data.msg.code == 50401) {
                  that.$router.push({
                    path: "/login"
                  });
                  return false
                }
                that.$message.error(response.data.msg.info);
              }
            })
        })
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.form.page = page
        this.getpro()
      },

      //获取商品
      getpro: function() {
        var that = this;
        axios.get('/api/plan-market/web/page/shoplist', {
            params: this.form
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.total = response.data.data.total
              that.list = response.data.data.data
              this.list.forEach(item => {
                if (item.on_sale == 0) {
                  this.$set(item, 'shangjia', true)
                } else {
                  this.$set(item, 'shangjia', false)
                }
              })
              that.loading = false
            } else {

              that.$message.error(response.data.msg.info);
            }
          })
      },
      //搜索
      search: function() {
        this.form.page = 1
        this.loading = true
        this.getpro()
      },
    }
  }
</script>

<style lang="scss" scoped>
  .douyin {
    margin: 0;
    padding: 0;
    background: #EFEFEF;

    .center {
      width: 1366px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .right {
        flex-basis: 1166px;
        background: #FFF;

        .o_ul {
          background: #F9F9F9;
          display: flex;

          .o_li {
            cursor: pointer;
            padding: 0 20px;
            line-height: 45px;
            display: block;
            color: #727272;
            border-top: 3px #F9F9F9 solid;
            font-size: 14px;
            text-align: center;
          }

          .act {
            border-top: 3px #DD2727 solid;
            background: #FFFFFF;
          }
        }

        .row {
          display: flex;
          justify-content: space-between;
          padding: 30px;

          .el-form {
            display: flex;

            .el-form-item {
              margin-bottom: 0;
            }

            .el-button {
              margin-left: 20px;
            }
          }

          .only {
            padding: 7px;
          }

          .el-button {
            line-height: 14px;
            height: 36px;
            margin-top: 2px;
          }
        }

        .row2 {
          display: flex;
          padding-left: 30px;

          .el-button {
            margin-right: 30px
          }
        }

        .row3 {
          background: #EEF7FF;
          padding: 5px 0;
          color: #FFFFFF;
          line-height: 50px;
          display: flex;
          margin-top: 30px;
          margin-bottom: 15px;
          justify-content: space-between;

          .dlogo {
            margin-left: 0px;
            background: #FFFFFF;
            border-radius: 25px;
            margin-right: 10px;

            img {
              width: 30px;
              display: block;
              padding: 10px;
            }
          }

          .dtitle {
            font-size: 20px;
          }

          .dlogo2 {
            background: #FFFFFF;
            color: #EEF7FF;
            font-size: 20px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 14px;
            width: 24px;
            ;
            height: 24px;
            position: relative;
            top: 13px;
            left: 10px;
          }

          .dcon {
            font-size: 14px;
          }

          .dget {
            line-height: 26px;
            color: #EEF7FF;
            font-size: 14px;
            background: #FFFFFF;
            height: 26px;
            margin-top: 14px;
            padding: 0px 20px;
            border-radius: 15px;
          }

          .dmy {
            font-size: 14px;
            padding: 0 20px;
          }
        }

        .list:nth-child(2) {
          border-top: 0;
        }

        .list {
          .el-dropdown {
            color: #197CFF
          }

          &:hover {
            background: #EFEFEF
          }

          display: flex;
          color: #727272;
          border-top:1px #EAEAEA solid;
          font-size: 14px;
          padding: 15px 0;
          line-height: 90px;
          text-align: left;

          .th1 {
            flex-basis: 360px;
            background: #F9F9F9;
            line-height: 45px;
            padding-left: 30px;
          }

          .th2 {
            flex-basis: 100px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .th3 {
            flex-basis: 150px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .th4 {
            flex-basis: 140px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .th5 {
            flex-basis: 150px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .th6 {
            flex-basis: 116px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .th8 {
            flex-basis: 120px;
            background: #F9F9F9;
            line-height: 45px;
          }

          .td8 {
            flex-basis: 120px;
            font-size: 14px;
          }

          .td1 {
            flex-basis: 90px;
            padding: 0 25px;
            cursor: pointer;

            img {
              width: 90px;
              display: block;
            }
          }

          .td2 {
            flex-basis: 250px;
            font-size: 14px;
            cursor: pointer;
            height: 90px;
            overflow: hidden;

            .title {
              height: 40px;
              line-height: 20px;
              font-size: 14px;
              color: #197CFF;
              cursor: pointer;
            }

            .yd {
              line-height: 20px;
              height: 30px;

              span:nth-child(1) {
                color: #FF0024;
                border: 1px #FF0024 solid;
              }

              span:nth-child(2) {
                color: #FBB03B;
                border: 1px #FBB03B solid;
              }

              span:nth-child(3) {
                color: #2e317c;
                border: 1px #2e317c solid;
              }

              span {
                border: 1px #ccc solid;
                margin-right: 10px;
                padding: 2px 8px;
                border-radius: 3px;
              }
            }

            .alt {
              line-height: 20px;
              color: #808080
            }
          }

          .td3 {
            flex-basis: 100px;
            font-size: 14px;
          }

          .td4 {
            flex-basis: 150px;
            font-size: 14px;
            height: 90px;
            overflow: hidden;

            .el-tooltip {
              width: 100%;
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
          }

          .td5 {
            flex-basis: 140px;
            font-size: 14px;
          }

          .td6 {
            flex-basis: 150px;
            font-size: 14px;
          }

          .td7 {
            flex-basis: 116px;
            font-size: 14px;
            line-height: 30px;

            .el-button {
              margin-left: 0;
              margin-bottom: 5px;
            }

            .el-dropdown {
              cursor: pointer;
            }
          }
        }

        .el-pagination {
          text-align: right;
          margin: 20px 0
        }

      }

    }

    .basispro {
      margin-top: 20px;
    }
  }
</style>
